<template>
  <view class="page">
    <!-- 个人信息 -->
    <view v-if="view==='profile'" class="p-wrap">
      <view class="avatar-wrap" @tap="changeAvatar">
        <image class="avatar" :src="user.avatar" mode="aspectFill" />
        <view class="cam"><image class="cam-ico" src="https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/weier/xiangji.png" mode="widthFix" /></view>
      </view>
      <view class="nick-line" @tap="goEditNick">
        <text class="nick">{{ user.nick }}</text>
        <image class="edit-ico" src="https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/weier/bianji.png" mode="widthFix" />
        <view class="underline"></view>
      </view>

      <view class="list">
        <view class="cell" @tap="goVerify">
          <text class="cell-l">身份认证</text>
          <view class="cell-r">
            <text :class="['cert', user.verified?'ok':'no']">{{ user.verified ? '已认证' : '未认证' }}</text>
            <text class="arrow iconfont icon-you"></text>
          </view>
        </view>
        <view class="cell" @tap="goEditPhone">
          <text class="cell-l">修改手机号码</text>
          <view class="cell-r">
            <text class="val">{{ user.phone }}</text>
            <text class="arrow iconfont icon-you"></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 昵称编辑 -->
    <view v-else-if="view==='nickname'" class="n-wrap">
      <view class="field">
        <text class="label">请输入新昵称</text>
        <input class="input" :value="nickDraft" maxlength="30" placeholder="仅支持数字、英文字母、汉字、下划线" placeholder-class="ph" @input="e=>nickDraft=e.detail.value" />
      </view>
      <view class="hint">仅支持数字、英文字母、汉字、下划线</view>
      <view class="cta-wrap"><button class="btn" :disabled="!nickValid" @tap="saveNick">确认保存</button></view>
    </view>

    <!-- 修改手机号 -->
    <view v-else class="ph-wrap">
      <view class="row">
        <view class="pre">+86</view>
        <input class="ipt" type="number" maxlength="11" placeholder="请输入新手机号" placeholder-class="ph" :value="phoneDraft" @input="e=>phoneDraft=e.detail.value" />
      </view>
      <view class="row">
        <image class="shield" src="/static/icons/shield.png" mode="widthFix" />
        <input class="ipt code" type="number" maxlength="6" placeholder="请输入验证码" placeholder-class="ph" :value="codeDraft" @input="e=>codeDraft=e.detail.value" />
        <button class="send" :disabled="!canSendCode" @tap="sendCode">{{ sendBtnText }}</button>
      </view>
      <view class="cta-wrap"><button class="btn" :disabled="!canBind" @tap="bindPhone">确认绑定</button></view>
    </view>
  </view>
</template>

<script>
import common_config from '../../static/js/common.js';
var config = common_config.config;
var that;	
var userInfo;
const BLUE = '#0075B8';
export default {
  data() {
    return {
      view: 'profile', // 'profile' | 'nickname' | 'phone'
      titleMap: { profile: '个人信息', nickname: '昵称', phone: '修改手机号码' },
      user: {
        avatar: '/static/avatar/default.png',
        nick: '小王同学12345',
        phone: '15211113987',
        verified: true
      },
      // 昵称
      nickDraft: '',
      // 手机
      phoneDraft: '',
      codeDraft: '',
      sending: false,
      leftSec: 0,
      timer: null
    };
  },
  computed: {
    nickValid() {
      const v = this.nickDraft.trim();
      return v.length > 0 && /^[\u4e00-\u9fa5\w]+$/.test(v);
    },
    phoneValid() {
      return /^1\d{10}$/.test(this.phoneDraft);
    },
    canSendCode() {
      return this.phoneValid && !this.sending && this.leftSec === 0;
    },
    sendBtnText() {
      return this.leftSec > 0 ? `${this.leftSec}s` : '发送验证码';
    },
    canBind() {
      return this.phoneValid && /^\d{4,6}$/.test(this.codeDraft);
    }
  },
  created() {
	  that = this;
	  userInfo = uni.getStorageSync('userInfo');
	  if(userInfo){
	  	userInfo = JSON.parse(userInfo);
	  	that.if_login = true;
	  	that.member_profile = userInfo;
		this.user.nick = userInfo.nickName;
		this.user.phone = userInfo.mobile;
		this.nickDraft = this.user.nick;
		this.phoneDraft = this.user.phone;
	  }else{
	  	that.if_login = false;
	  }
   
  },
  methods: {
    handleBack() {
      if (this.view !== 'profile') { this.view = 'profile'; return; }
      if (getCurrentPages().length > 1) uni.navigateBack(); else uni.switchTab({ url: '/pages/home/home' });
    },
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        success: (res) => { this.user.avatar = res.tempFilePaths[0]; }
      });
    },
    goEditNick() { this.nickDraft = this.user.nick; this.view = 'nickname'; },
    saveNick() {
      if (!this.nickValid) return;
      this.user.nick = this.nickDraft.trim();
      uni.showToast({ title: '已保存', icon: 'success' });
      this.view = 'profile';
    },
    goEditPhone() { this.phoneDraft = this.user.phone; this.codeDraft = ''; this.view = 'phone'; },
    goVerify() { uni.navigateTo({ url: '/pages/verify/verify' }); },
    sendCode() {
      if (!this.canSendCode) return;
      this.sending = true;
      // TODO: 真实接口发送验证码
      uni.showToast({ title: '验证码已发送', icon: 'none' });
      this.leftSec = 60;
      this.timer && clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.leftSec--;
        if (this.leftSec <= 0) { clearInterval(this.timer); this.timer = null; this.sending = false; }
      }, 1000);
    },
    bindPhone() {
      if (!this.canBind) return;
      // TODO: 真实校验
      this.user.phone = this.phoneDraft;
      uni.showToast({ title: '绑定成功', icon: 'success' });
      this.view = 'profile';
    }
  },
  onUnload() { this.timer && clearInterval(this.timer); }
};
</script>

<style lang="scss" scoped>
$bg:#f6f6f6;$blue:#0075B8;
.page{background:#fff;min-height:100vh;padding-bottom:env(safe-area-inset-bottom);}
.nav{position:sticky;top:0;z-index:10;background:#fff;padding:calc(var(--status-bar-height,0px)) 24rpx 16rpx;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1rpx solid rgba(0,0,0,0.04);}
.nav-left{justify-self:start;padding:10rpx;}
.nav-right{justify-self:end;display:flex;gap:20rpx;}
.nav-btn{padding:10rpx;}
.nav-ico{width:36rpx;}
.nav-title{justify-self:center;font-size:36rpx;font-weight:700;color:#222;}
/* 个人信息 */
.p-wrap{padding:32rpx 24rpx;}
.avatar-wrap{margin:40rpx auto 12rpx;width:220rpx;height:220rpx;border-radius:50%;position:relative;}
.avatar{width:100%;height:100%;border-radius:50%;background:#e6f0f7;}
.cam{position:absolute;right:6rpx;bottom:6rpx;width:56rpx;height:56rpx;border-radius:50%;background:$blue;display:flex;align-items:center;justify-content:center;}
.cam-ico{width:30rpx;}
.nick-line{display:flex;align-items:center;justify-content:center;gap:12rpx;margin-top:8rpx;position:relative;}
.nick{font-size:40rpx;font-weight:700;color:#333;}
.edit-ico{width:28rpx;height:28rpx;}
.underline{position:absolute;bottom:-12rpx;left:50%;transform:translateX(-50%);width:480rpx;height:6rpx;background:#e6e6e6;border-radius:6rpx;}
.list{margin-top:70rpx;}
.cell{display:flex;align-items:center;justify-content:space-between;height:110rpx;padding:0 12rpx;border-bottom:1px solid #eee;}
.cell-l{color:#9a9a9a;font-size:30rpx;}
.cell-r{display:flex;align-items:center;gap:14rpx;}
.arrow{font-size:28rpx;color:#c0c0c0;line-height:1;display:inline-block;}
.val{color:#333;font-size:30rpx;}
.cert{font-size:30rpx;}
.cert.ok{color:#ff3b30;}
.cert.no{color:#999;}
/* 昵称编辑 */
.n-wrap{padding:32rpx 24rpx;}
.field{margin-top:24rpx;}
.label{display:block;color:#9a9a9a;font-size:30rpx;margin-bottom:16rpx;}
.input{border-bottom:1px solid #e6e6e6;height:88rpx;line-height:88rpx;font-size:34rpx;color:#222;}
.ph{color:#c7c7c7;}
.hint{color:#b0b0b0;font-size:24rpx;margin-top:12rpx;}
/* 修改手机号 */
.ph-wrap{padding:40rpx 24rpx;}
.row{display:flex;align-items:center;border-bottom:1px solid #e6e6e6;height:96rpx;margin-bottom:22rpx;}
.pre{color:#c0c0c0;font-size:40rpx;margin-right:16rpx;}
.ipt{flex:1;font-size:32rpx;color:#222;}
.shield{width:30rpx;height:30rpx;margin-right:10rpx;}
.code{margin-right:16rpx;}
.send{background:#ddd;color:#666;border-radius:12rpx;padding:0 20rpx;height:64rpx;line-height:64rpx;font-size:26rpx;}
.send:enabled{background:$blue;color:#fff;}
/* 公共按钮 */
.cta-wrap{padding:40rpx 40rpx 0;}
.btn{width:100%;height:100rpx;line-height:100rpx;text-align:center;border-radius:24rpx;background:$blue;color:#fff;font-size:34rpx;font-weight:700;}
.btn:disabled{background:#bfbfbf;color:#fff;}
.btn::after{border:none;}
</style>
